<template>
	<view class="center-box">
		<navigator class="head-box" url="/subpkg/login/login" v-if="!token">
			<view class="head-img">
				<u--image shape="circle" width="62" height="62">
				</u--image>
			</view>
			<text class="head">点击登录</text>
		</navigator>
		<view class="head-box" v-else >
			<view class="head-img">
				<u--image :src="userInfo.avatar" shape="circle" width="62" height="62" @click="getAvatar"></u--image>
			</view>
			<text class="head" @click="updateName()">{{userInfo.name}}</text>
		</view>

		<view class="my-info">
			<view class="myOrder-box info">
				<u-icon size="22px" name="order"></u-icon>
				<text class="myOrder middle">我的订单</text>
				<u-icon name="arrow-right" class="right"></u-icon>
			</view>
			<view class="mychat-box info">
				<u-icon size="22px" name="chat"></u-icon>
				<text class="chat middle">我的评论</text>
				<u-icon name="arrow-right" class="right"></u-icon>
			</view>
			<navigator class="myAddress-box info" url="/subpkg/myAddress/myAddress">
				<u-icon size="22px" name="map"></u-icon>
				<text class="myAddress middle">我的地址</text>
				<u-icon name="arrow-right" class="right"></u-icon>
			</navigator>
			<view class="my-box info">
				<u-icon size="22px" name="info-circle"></u-icon>
				<text class="my middle">关于我们</text>
				<u-icon name="arrow-right" class="right"></u-icon>
			</view>
			<view class="service-box info">
				<u-icon size="22px" name="server-man"></u-icon>
				<text class="service middle">联系客服</text>
				<u-icon name="arrow-right" class="right"></u-icon>
			</view>

		</view>
		<!-- <uni-popup ref="popup" type="top" @click="getAvatar" background-color="#fff" >底部弹出 Popup</uni-popup> -->
		<u-modal :show="show" @confirm="update">
			<view class="slot-content">
				<u--input border="surround" v-model="nickName"></u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		reqGetUserInfo,
		reqUpdateName,
		reqUpdateImg
	} from '@/common/api.js'
	export default {
		data() {
			return {
				userInfo: {
					name: '',
					avatar: '',
					imgUrl: '',
				},
				show: false,
				// 昵称
				nickName: '',
				token: uni.getStorageSync('token')
			}
		},
		methods: {
			// 获取用户信息
			async getUserInfo() {
				const {
					data: res
				} = await reqGetUserInfo()
				// console.log(res);
				this.userInfo.name = res.nickname
				this.userInfo.avatar = res.avatar
			},


			// 修改头像
			getAvatar() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						 // console.log(res.tempFilePaths);
						uni.uploadFile({
							url: '/user/upload',
							filePath: res.tempFilePaths[0],
							// header: {
							// 	'Authorization': 'Bearer ' + this.token,
							// 	// "Content-Type": "multipart/form-data",
							// },
							// formData: {
							// 	file: '1.webp'
							// },
							name: 'file',
							success: async (res) => {
								console.log(res.data);
								const result = await reqUpdateImg(res.data)
								if(result.code == 200) {
									uni.showToast({
										title:"修改成功",
										icon:'success'
									})
								}
							}
							
						})
					}
				});
			},

			// 修改昵称
			updateName() {
				this.show = true

			},

			async update() {
				const res = await reqUpdateName(this.nickName)
				this.getUserInfo()
				this.show = false
			}
		},
		onLoad() {
			this.getUserInfo()
		}
	}
</script>

<style lang="scss">
	.center-box {

		// padding: 0 15px;
		.head-box {
			height: 170px;
			background-color: #2588FF;
			display: flex;
			align-items: center;
			line-height: 150px;
			padding: 0 22px;

			.head-img {
				width: 62px;
				height: 62px;
				border: 2px solid white;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 22px;

			}

			.head {
				color: white;
				font-size: 18px;
				font-weight: bold;
			}
		}

		.my-info {
			padding: 22px 22px;
			height: calc(100% - 190px);
			width: calc(100% - 44px);
			background-color: white;
			position: absolute;
			top: 150px;
			border-top-left-radius: 22px;
			border-top-right-radius: 22px;

			.info {
				display: flex;
				margin: 20px 0;
				position: relative;

				.middle {
					margin-left: 10px;
					font-size: 18px;
				}

				.right {
					position: absolute;
					right: 0px;
				}
			}
		}
	}

	.uni-popup {
		height: 300px;
	}
</style>
